<template>
    <div>
        <h2>房型修改页面</h2>

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">房型名称</td>
                    <td>
                        <input type="text" v-model="queryInfo.TypeName">
                    </td>
                </tr>

                <tr>
                    <td align="right">单价（元）</td>
                    <td>
                        <input type="text" v-model="queryInfo.Price">
                    </td>
                </tr>

                <tr>
                    <td align="right">室内面积（平方米）</td>
                    <td>
                        <input type="number" v-model="queryInfo.Area">
                    </td>
                </tr>

                <tr>
                    <td align="right">最多入住人数</td>
                    <td>
                        <input type="text" v-model="queryInfo.MaxCount">
                    </td>
                </tr>

                <tr>
                    <td align="right">图片上传</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="queryInfo.Phone" height="100" width="100" v-if="queryInfo.Phone!=''" alt="">
                    </td>
                </tr>

                <tr>
                    <td align="right">房间描述</td>
                    <td>
                        <textarea rows="5" cols="50" v-model="queryInfo.Desc"></textarea>
                    </td>
                </tr>

                <tr>
                    <td align="right">是否有窗</td>
                    <td>
                        <input type="radio" name="iswin" :value="0" v-model="queryInfo.IsWindows">是
                        <input type="radio" name="iswin" :value="1" v-model="queryInfo.IsWindows">否
                    </td>
                </tr>

                <tr>
                    <td align="right"></td>
                    <td>
                        <input type="button" value="修改" class="btn btn-primary" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
const router=useRouter();
const route=useRoute();
import moment from 'moment';

let queryInfo=reactive({
    "Id": route.query.id,
  "TypeName": "",
  "Price": '',
  "Area": '',
  "MaxCount": '',
  "Phone": "",
  "Desc": "",
  "IsWindows": '',
})

//-----反填----
onMounted(()=>{
    getFan();
})

const getFan=()=>{
    axios({
        method:'get',
        url:'/api/Week3/FanType',
        params:{
            id:route.query.id
        }
    })
    .then(res=>{
        console.log(res);
        Object.assign(queryInfo,res.data);
    })
    .catch(err=>{
        console.log(err);
    })
}

//----图片上传----
const img=(e:any)=>{
    var obj=e.target.files[0];
    var f=new FormData();
    f.append('file',obj);

    axios({
        method:'post',
        url:'/api/Week3/UpFileType',
        data:f
    })
    .then(res=>{
        console.log(res);
        if(res.data==-1){
            alert('图片格式不正确');
            return;
        }
        if(res.data==-2){
            alert('图片过大');
            return;
        }
       queryInfo.Phone=res.data;
    })
    .catch(err=>{
        console.log(err);
    })

}

const ok=()=>{
    //有效性验证
    if(queryInfo.TypeName==""){
        alert('房型名称不能为空');
        return;
    }
    if(queryInfo.Price==""){
        alert('价格不能为空');
        return;
    }
    if(queryInfo.Area==""){
        alert('面积不能为空');
        return;
    }
    if(queryInfo.MaxCount==""){
        alert('最多入住人数不能为空');
        return;
    }
    if(queryInfo.Phone==""){
        alert('图片不能为空');
        return;
    }
    if(queryInfo.Desc==""){
        alert('描述不能为空');
        return;
    }

    //返回网络请求
    axios({
        method:'put',
        url:'/api/Week3/UpdWeek3Type',
        data:queryInfo
    })
    .then(res=>{
        console.log(res);
        if(res.data==-1){
            alert('房型名称不能重复');
            return;
        }
        if(res.data>0){
            alert('成功');
            router.push('/htypeShow')
        }
        else{
            alert('失败')
        }
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>